<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="test-boxx">
        <div class="test-box">
            <div class="s-header" ></div>
            <div class="s-footer" ></div> 
            <div class="ctx">232</div>
        </div>
        <div class="test-box">

    <div class="s-header" ></div>
            <div class="ctx">232</div>
        </div>
    </div>
</body>
<style>
    .test-box {
        width: 200px;
        margin: 0 auto;
        position: relative
    }

    .test-box::before,
    .test-box::after {
        content: '';
        display: block;
        height: 20px;
        background-color: #fff;
        position: relative;
        z-index: 2
    }

    .test-box .ctx {
        background-color: #fff;
        padding: 20px;
        -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
        -webkit-border-radius: 2px;
        border-radius: 2px
    }

    .test-box .s-header {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        overflow: hidden;
        height: 20px
    }

    .test-box .s-header::before {
        top: 0;
        -webkit-border-bottom-right-radius: 100%;
        border-bottom-right-radius: 100%;
        background: -webkit-radial-gradient(at 0 0, #e1e1e1 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4));
        background: -o-radial-gradient(at 0 0, #e1e1e1 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4));
        background: radial-gradient(at 0 0, #e1e1e1 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4))
    }

    .test-box .s-header::after {
        top: 0;
        -webkit-border-bottom-left-radius: 100%;
        border-bottom-left-radius: 100%;
        background: -webkit-radial-gradient(at 100% 0, #e1e1e1 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4));
        background: -o-radial-gradient(at 100% 0, #e1e1e1 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4));
        background: radial-gradient(at 100% 0, #e1e1e1 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4))
    }

    .test-box .s-footer {
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        overflow: hidden;
        height: 20px
    }

    .test-box .s-footer::before {
        bottom: 0;
        -webkit-border-top-right-radius: 100%;
        border-top-right-radius: 100%;
        background: -webkit-radial-gradient(at 0 100%, #e1e1e1 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4));
        background: -o-radial-gradient(at 0 100%, #e1e1e1 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4));
        background: radial-gradient(at 0 100%, #e1e1e1 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4))
    }

    .test-box .s-footer::after {
        bottom: 0;
        -webkit-border-top-left-radius: 100%;
        border-top-left-radius: 100%;
        background: -webkit-radial-gradient(at 100% 100%, #e1e1e1 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4));
        background: -o-radial-gradient(at 100% 100%, #e1e1e1 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4));
        background: radial-gradient(at 100% 100%, #e1e1e1 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4))
    }

    .test-box .s-header::before,
    .test-box .s-header::after,
    .test-box .s-footer::before,
    .test-box .s-footer::after {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: #e1e1e1;
        z-index: 3
    }

    .test-box .s-header::before,
    .test-box .s-footer::before {
        left: 0
    }

    .test-box .s-header::after,
    .test-box .s-footer::after {
        right: -20px;
        right: 0
    }

    .test-box2 {
        width: 200px;
        margin: 0 auto;
        position: relative
    }

    .test-box2::before,
    .test-box2::after {
        content: '';
        display: block;
        height: 20px;
        background-color: #fff;
        position: relative;
        z-index: 2
    }

    .test-box2 .ctx {
        background-color: #fff;
        padding: 20px;
        -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
        -webkit-border-radius: 2px;
        border-radius: 2px
    }

    .test-box2 .s-header {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        overflow: hidden;
        height: 20px
    }

    .test-box2 .s-header::before {
        top: -20px;
        -webkit-border-bottom-right-radius: 50%;
        border-bottom-right-radius: 50%;
        -webkit-box-shadow: -1px -1px 6px rgba(0, 0, 0, 0.2) inset;
        box-shadow: -1px -1px 6px rgba(0, 0, 0, 0.2) inset
    }

    .test-box2 .s-header::after {
        top: -20px;
        -webkit-border-bottom-left-radius: 50%;
        border-bottom-left-radius: 50%;
        -webkit-box-shadow: 1px -1px 6px rgba(0, 0, 0, 0.2) inset;
        box-shadow: 1px -1px 6px rgba(0, 0, 0, 0.2) inset
    }

    .test-box2 .s-footer {
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        overflow: hidden;
        height: 20px
    }

    .test-box2 .s-footer::before {
        bottom: -20px;
        -webkit-border-top-right-radius: 50%;
        border-top-right-radius: 50%;
        -webkit-box-shadow: -1px 1px 6px rgba(0, 0, 0, 0.2) inset;
        box-shadow: -1px 1px 6px rgba(0, 0, 0, 0.2) inset
    }

    .test-box2 .s-footer::after {
        bottom: -20px;
        -webkit-border-top-left-radius: 50%;
        border-top-left-radius: 50%;
        -webkit-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2) inset;
        box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2) inset
    }

    .test-box2 .s-header::before,
    .test-box2 .s-header::after,
    .test-box2 .s-footer::before,
    .test-box2 .s-footer::after {
        content: '';
        position: absolute;
        width: 40px;
        height: 40px;
        background-color: #e1e1e1;
        z-index: 3
    }

    .test-box2 .s-header::before,
    .test-box2 .s-footer::before {
        left: -20px
    }

    .test-box2 .s-header::after,
    .test-box2 .s-footer::after {
        right: -20px
    }

</style>

</html>
